<template>
	<view class="servie content-20">
		<view class="servie-item" v-for="item in items" :key='item.id' @click="$link('/pagesMain/service/serviceDetail?id='+item.id)">
			<view class="servie-item__title">{{item.title}}</view>
			<view class="servie-item__desc">{{item.synopsis}}</view>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
	export default {
		data() {
			return{
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
			}
		},
		
		onLoad() {
			this.pageSize = common.pageSize
			this.getItems()
		},
		
		methods: {
			getItems() {
				let { pageIndex, pageSize } = this.$data
				api.getArticlePage({typeCode: 'acfw', pageIndex, pageSize},(res) => {
					 this.totalCount = res.totalCount
					 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
					 let temp = res.items
					 if(this.pageIndex !== 1) {
					     temp = [...this.items, ...res.items]
					 }
					 this.items = temp
				}) 
			}
		},
		
		onReachBottom() {
			if(this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			}else{
				this.pageIndex ++
				this.getItems()
			}
		}
		
	}
</script>

<style scoped lang="scss">
	@import '../../static/common.scss';
</style>
